<script lang="ts" setup>
// import { useRouter } from "vue-router";
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";
import AutoCharge from "./AutoCharge.vue";

const value5 = ref<string>("服务编号");
const value6 = ref<string>("");
const opts = ["服务编号"];

const dataSource = ref([
  {
    key: "1",
    no: 1,
    name: "Mike",
    cycle: 32,
    status: "正常",
    purchaseDate: "2022-02-24",
    autoRecharge: false,
  }, {
    key: "2",
    no: 2,
    name: "Mike",
    cycle: 32,
    status: "正常",
    purchaseDate: "2022-02-24",
    autoRecharge: true,
  },
]);

const columns = ref([
  {
    title: "服务编号",
    dataIndex: "no",
    key: "no",
  },
  {
    title: "服务名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "服务周期",
    dataIndex: "cycle",
    key: "cycle",
  },
  {
    title: "购买时间",
    dataIndex: "purchaseDate",
    key: "purchaseDate",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
  {
    title: "自动续费",
    dataIndex: "autoRecharge",
    key: "autoRecharge",
  },
]);

// const columns2 = ref([
//   {
//     title: "服务编号",
//     dataIndex: "no",
//     key: "no",
//   },
//   {
//     title: "服务名称",
//     dataIndex: "name",
//     key: "name",
//   },
//   {
//     title: "服务周期",
//     dataIndex: "cycle",
//     key: "cycle",
//   },
//   {
//     title: "购买时间",
//     dataIndex: "purchaseDate",
//     key: "purchaseDate",
//   },
//   {
//     title: "状态",
//     dataIndex: "status",
//     key: "status",
//   },
//   {
//     title: "操作",
//     dataIndex: "operation",
//     key: "operation",
//   },
//   {
//     title: "自动续费",
//     dataIndex: "autoRecharge",
//     key: "autoRecharge",
//   },
// ]);




// const router = useRouter();

// const alterEvent = () => {
//   router.push({
//     path: "/service/softwareInfo"
//   })
// }

// const delEvent = () => {
// }



const check = () => {
  // open.value = true
}

</script>
<template>
  <div class="pl-5 pr-5">
    <ProductBox title="我的软件">
      <div class="flex justify-between mb-5">
        <router-link to="/product">
          <a-button type="primary">购买</a-button>
        </router-link>
        <div class="w-125">
          <a-input-group class="flex">
            <a-select v-model:value="value5">
              <a-select-option :value="opt" v-for="(opt, seq) in opts" :key="seq + 'opt'">
                {{ opt }}
              </a-select-option>
            </a-select>
            <a-input v-model:value="value6" style="flex: 1" />
          </a-input-group>
        </div>
      </div>
      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns" :customRow="(_: any) => {
        return {
          onclick: () => {
            // open = true;
          }
        }
      }">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <div class="flex">
              <a-button type="primary" class="mr-5" @click.stop="check">查看</a-button>
              <!-- <a-button type="primary" class="mr-5" @click.stop="alterEvent">修改</a-button>
              <a-button type="primary" danger @click.stop="delEvent">删除</a-button> -->
            </div>
          </template>

          <template v-if="column.key === 'autoRecharge'">
            <!-- {{ record }} -->
            <!-- @change-auto-recharge="changeAutoRecharge(record)" -->
            <AutoCharge :record="record" />
          </template>
        </template>
      </a-table>
    </ProductBox>
  </div>


</template>
<style lang="scss" scoped></style>
